<template>
  <div class="contnet">
    <div class="info-sort">
      <div class="info-sort-search">
        <el-input placeholder="请输入内容" class="input-with-select" v-model="keywords">
          <el-button slot="append" icon="el-icon-search" class="info-sort-search-btn" v-on:click="searchPatient">搜索</el-button>
        </el-input>
      </div>
      <div class="info-sort-icon">
        <div v-on:click="sortCase('caseNum', 'descending')" class="img-sort-item">
          <img src="@/assets/proImg/1_9Desc.png" class="img-sort">
        </div>
        <div v-on:click="sortCase('caseNum', 'ascending')" class="img-sort-item">
          <img src="@/assets/proImg/1_9Asc.png" class="img-sort">
        </div>
        <div v-on:click="sortCase('name', 'descending')" class="img-sort-item">
          <img src="@/assets/proImg/a_zDesc.png" class="img-sort">
        </div>
        <div v-on:click="sortCase('name', 'ascending')" class="img-sort-item">
          <img src="@/assets/proImg/a_zAsc.png" class="img-sort">
        </div>
      </div>
    </div>
    <div class="info-chart">
      <el-table
        ref="caseTable"
        :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
        :row-style="{height: '70px'}"
        :default-sort="{prop: 'caseNum', order: 'ascending'}"
        @row-click="caseInfo"
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="caseNum"
          label="病历编号"
          width="380">
        </el-table-column>
        <el-table-column
          prop="name"
          label="患者姓名"
          :sort-method="sortByName"
          sortable
          width="380">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="toSimilar(scope.$index, scope.row)">相似病历
            </el-button>
            <el-button
              size="mini"
              @click="toGraph(scope.$index, scope.row)">图文图谱
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="info-chart-page">
        <el-pagination align='center'
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[1,5,10,20]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="tableData.length">
        </el-pagination>
      </div>
    </div>
    <div class="info-delete">
      <el-button type="primary" class="info-delete-btn" v-on:click="deleteSelected">批量删除</el-button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  name: 'CaseInfo',
  data () {
    return {
      tableData: [],
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 5, // 每页的数据条数
      selectedData: [],
      keywords: '' // 搜索关键词
    }
  },
  mounted () {
    this.loadInfo()
  },
  methods: {
    toSimilar (index, row) {
      this.emitHead('相似病历')
      Vue.prototype.GLOBAL.tgCaseId = row.caseNum
      this.$router.push('/case/similar?id=' + row.caseNum)
    },
    toGraph (index, row) {
      this.emitHead('图文图谱')
      Vue.prototype.GLOBAL.tgCaseId = row.caseNum
      this.$router.push('/case/graphicGraph?id=' + row.caseNum)
    },
    handleDelete (index, row) {
      console.log(index, row)
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.currentPage = 1
      this.pageSize = val
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
    },
    deleteSelected () {
      if (!this.selectedData.length) {
        // return ElMessage.success('请至少选择一个进行删除')
        return this.$message({
          message: '请至少选择一个进行删除',
          type: 'warning'
        })
      }
      this.$alert('此操作将批量删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let val = this.selectedData
        if (val) {
          console.log(val)
          // TODO:向后端发请求删数据
          for (let i = 0; i < val.length; i++) {
            this.tableData = this.tableData.filter((v) => v.caseNum !== val[i].caseNum)
          }
        }
        this.$message({
          message: '删除成功',
          type: 'success'
        })
      }).catch(err => {
        console.log(err)
        this.$message({
          message: '已取消选择',
          type: 'warning'
        })
      })
    },
    handleSelectionChange (val) {
      this.selectedData = val
    },
    sortCase (prop, order) {
      this.$refs.caseTable.sort(prop, order)
    },
    sortByName (object1, object2) {
      let str1 = object1.name
      let str2 = object2.name
      return str1.localeCompare(str2, 'zh-Hans-CN', {sensitivity: 'accent'})
    },
    loadInfo () {
      var _this = this
      this.$axios
        .get('/cases')
        .then(successResponse => {
          if (successResponse.data.code === 200) {
            console.log(successResponse.data.data)
            let renderData = successResponse.data.data
            // console.log(renderData[0].length)
            for (let i = 0, length = renderData[0].length; i < length; i++) {
              let tableItem = {
                caseNum: '',
                name: ''
              }
              tableItem.caseNum = renderData[1][i].id
              tableItem.name = renderData[0][i]
              _this.tableData.push(tableItem)
            }
          }
        })
        .catch(failResponsse => {
          console.log(failResponsse)
        })
    },
    caseInfo (row, column, event) {
      Vue.prototype.GLOBAL.tgCaseId = row.caseNum
      this.$router.push('/case/patientImg?id=' + row.caseNum)
      // console.log(row)
    },
    emitHead (name) {
      // console.log(name)
      this.$emit('showHead', name)
    },
    searchPatient () {
      let keywords = this.keywords
      var _this = this
      if (!isNaN(parseFloat(keywords))) {
        this.$axios
          .get('/case/patient', {
            params: {
              caseId: keywords
            }
          })
          .then(
            successResponse => {
              if (successResponse.data.code === 200) {
                _this.tableData = []
                console.log(successResponse.data.data)
                let renderData = successResponse.data.data
                // console.log(renderData[0].length)
                for (let i = 0, length = renderData[0].length; i < length; i++) {
                  let tableItem = {
                    caseNum: '',
                    name: ''
                  }
                  tableItem.caseNum = renderData[0][i].id
                  tableItem.name = renderData[1][i]
                  _this.tableData.push(tableItem)
                }
              }
            }
          )
          .catch(
            failResponse => {
              console.log(failResponse.msg)
            }
          )
      } else {
        this.$axios
          .get('/patientCase', {
            params: {
              keyword: keywords
            }
          })
          .then(
            successResponse => {
              if (successResponse.data.code === 200) {
                _this.tableData = []
                console.log(successResponse.data.data)
                let renderData = successResponse.data.data
                // console.log(renderData[0].length)
                for (let i = 0, length = renderData[0].length; i < length; i++) {
                  let tableItem = {
                    caseNum: '',
                    name: ''
                  }
                  tableItem.caseNum = renderData[1][i].id
                  tableItem.name = renderData[0][i]
                  _this.tableData.push(tableItem)
                }
              }
            }
          )
          .catch(
            failResponse => {
              console.log(failResponse.msg)
            }
          )
      }
    }
  }
}
</script>

<style scoped>
.info-sort {
  display: flex;
  justify-content: start;
  align-items: center;
  margin-bottom: 20px;
  margin-top: 20px;
  margin-left: 20px;
}

.info-sort-search {
  margin-right: 50px;
  width: 35%;
}

.info-sort-search-btn {
  background-color: #3894ff !important;
  color: white !important;
  border-radius: 0;
}

.info-sort-icon {
  width: 25%;
  margin-left: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-chart-page {
  display: flex;
  justify-content: right;
  align-items: center;
  margin-top: 50px;
  margin-right: 50px;
}

.info-delete {
  margin-top: 30px;
  position: absolute;
  right: 0;
  margin-right: 50px;
}

.info-delete-btn {
  background-color: #f56c6c;
  border-color: #f56c6c;
  width: 200px;
}

.info-chart-checkedBox {
  display: none;
}

.img-sort {
  height: 30px;
}

.img-sort-item {
  cursor: pointer;
}
</style>
